<template>
<div class="announcement-main">
    <div class="page-header">
        <h1>通知公告</h1>
        <p>最新资讯和重要通知</p>
    </div>
    
    <div class="announcement-container">
        <div class="announcement-list">
            <div class="announcement-item" v-for="(announcement, index) in tableData.slice((currentPage - 1)* pagesize, currentPage * pagesize)" :key="index" @click="showDetail(announcement, index)">
                <div class="announcement-content">
                    <h3 class="announcement-title">{{ announcement.mesgTitle }}</h3>
                    <div class="announcement-meta">
                        <span class="announcement-author">{{ announcement.mesgAuthor }}</span>
                        <span class="announcement-date">{{ announcement.mesgDate }}</span>
                    </div>
                </div>
                <div class="announcement-arrow">
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
        </div>
        
        <div class="pagination-container">
            <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="currentPage" 
                :page-sizes="[5, 10, 20]" 
                :page-size="pagesize" 
                background 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="tableData.length">
            </el-pagination>
        </div>
    </div>

    <!-- 公告详情对话框 -->
    <el-dialog 
        title="公告详情" 
        :visible.sync="dialogVisible" 
        width="600px"
        :before-close="handleClose">
        <div class="announcement-detail" v-if="selectedAnnouncement">
            <h2 class="detail-title">{{ selectedAnnouncement.mesgTitle }}</h2>
            <div class="detail-content">
                <p class="detail-text">{{ selectedAnnouncement.mesgDesc }}</p>
            </div>
            <div class="detail-footer">
                <p class="detail-author">{{ selectedAnnouncement.mesgAuthor }}</p>
                <p class="detail-date">{{ selectedAnnouncement.mesgDate }}</p>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
const axios = require('axios')
const qs = require('qs')
const ele = require('element-ui')

export default {
    name: 'hotel_page',
    data() {
        return {
            currentPage: 1,
            pagesize: 5,
            dialogVisible: false,
            selectedAnnouncement: null,
            tableData: []
        }
    },
    methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
            console.log(this.pagesize) //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            console.log(this.currentPage) //点击第几页
        },
        showDetail(announcement, index) {
            this.selectedAnnouncement = announcement;
            this.dialogVisible = true;
        },
        handleClose(done) {
            this.dialogVisible = false;
            this.selectedAnnouncement = null;
            if (done) done();
        },

    },
    created() {
        let _this = this
        this.userName = window.localStorage.getItem('userName')
        axios({
            method: 'get',
            url: 'http://localhost:8080/getAnnouncementList',
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        }).then(function (response) {
            _this.tableData = response.data.mesgList
        }).catch(function (error) {
            console.log(error)
        })
    }
};
</script>

<style scoped>
.announcement-main {
    min-height: 100vh;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    padding: 40px 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
    color: white;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.announcement-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.announcement-list {
    margin-bottom: 30px;
}

.announcement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
}

.announcement-item:hover {
    background-color: #f8f9fa;
    transform: translateX(5px);
}

.announcement-item:last-child {
    border-bottom: none;
}

.announcement-content {
    flex: 1;
}

.announcement-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.announcement-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #666;
}

.announcement-author {
    color: #409EFF;
    font-weight: 500;
}

.announcement-date {
    color: #999;
}

.announcement-arrow {
    color: #ccc;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.announcement-item:hover .announcement-arrow {
    color: #409EFF;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* 公告详情对话框样式 */
.announcement-detail {
    padding: 20px 0;
}

.detail-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
    text-align: center;
    border-bottom: 2px solid #409EFF;
    padding-bottom: 15px;
}

.detail-content {
    margin: 30px 0;
    min-height: 200px;
}

.detail-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    text-indent: 2em;
    margin: 0;
}

.detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.detail-author {
    font-size: 0.9rem;
    color: #409EFF;
    font-weight: 500;
    margin: 0;
}

.detail-date {
    font-size: 0.9rem;
    color: #999;
    margin: 0;
}

.el-dialog {
    border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .announcement-container {
        padding: 20px;
        margin: 0 10px;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .page-header p {
        font-size: 1rem;
    }
    
    .announcement-item {
        padding: 15px;
    }
    
    .announcement-title {
        font-size: 1.1rem;
    }
    
    .announcement-meta {
        flex-direction: column;
        gap: 5px;
    }
    
    .detail-title {
        font-size: 1.5rem;
    }
    
    .detail-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
</style>
